<%--
  Created by IntelliJ IDEA.
  User: User
  Date: 2020/10/21
  Time: 9:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css" charset="GBK">
    <script src="${pageContext.request.contextPath}/static/jquery-3.5.1.min.js" charset="GBK"></script>
    <script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <link href="${pageContext.request.contextPath}/static/toastr-master/toastr.min.css" rel="stylesheet"/>
    <script src="${pageContext.request.contextPath}/static/toastr-master/toastr.min.js" charset="GBK"></script>
</head>
<style>
    .layui-table th {
        font-weight: bold;
    }

    .layui-table-cell {
        height: 36px;
        line-height: 36px;
    }

    /*下拉框高度*/
    .layui-unselect dl {
        max-height: 120px;
    }

    #addTypeFrom {
        margin-left: 50px;
        margin-top: 10px;
    }

</style>
<body style="padding: 3px">

<!--数据表格-->
<table class="layui-hide " id="typeTable" lay-filter="typeTable"></table>

<!--上侧搜索按钮组-->
<div style="display: none;" id="userToolbar">
    <div class="layui-col-md2 layui-col-md-offset2">
        <input type="text" id="searchName" class="layui-input" placeholder="类型名称">
    </div>
    <button type="button" data-type="reload"
            class="layui-btn layui-btn-radius layui-btn-normal layui-icon layui-icon-search"
            lay-event="search">搜索
    </button>
    <button type="button" class="layui-btn" lay-event="addType">新增类型</button>
</div>

<!--数据表格右侧按钮组-->
<script type="text/html" id="barDemo">
    <button class="layui-btn layui-btn-normal" lay-event="modify">修改</button>
    <button class="layui-btn layui-btn-danger" lay-event="delete">删除</button>
</script>

<%--添加、修改类型弹出框--%>
<div class="layui-elem-field" style="display: none" id="addTypeDiv">
    <form class="layui-form layui-form-pane" id="addTypeFrom" lay-filter="addTypeFrom">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">类型ID</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" name="typeid" placeholder="ID不能添加" disabled>
                        <input type="text" style="display: none" name="typeid" id="typeid">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">类型名称</label>
                    <div class="layui-input-inline">
                        <input type="text" lay-verify="required|addTypeName" name="typename" class="layui-input"
                               placeholder="类型名称">
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-col-md-offset1">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" lay-submit lay-filter="addType">提交</button>
                    <button type="reset" class="layui-btn">重置</button>
                </div>
            </div>
    </form>
</div>

<%--删除类型弹出框--%>
<div class="layui-elem-field" style="display: none" id="deleteTypeDiv">
    <form class="layui-form layui-form-pane" id="deleteTypeFrom" lay-filter="deleteTypeFrom">
        <input type="text" style="display:none;" id="deleteTypeId" name="typeid">
        <input type="text" style="display:none;" name="count" id="deleteTypeCount">
        <h2 style="margin-left: 20px">确认删除该类型吗？</h2>
        <div class="layui-form-item layui-col-md5 layui-col-md-offset2" style="margin-top: 20px;">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="deleteTypeBtn">确认删除</button>
            </div>
        </div>
    </form>
</div>

<!--加载数据表格-->
<script>
    layui.use('table', function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;

        //渲染类型表格-showTable()
        function showTable() {
            let typename = $("#searchName").val();
            table.render({
                elem: '#typeTable'
                , url: '/typeServlet/getAllTypeByPage'//数据接口
                , where: {typename: typename}
                , toolbar: '#userToolbar'
                , even: true //开启隔行背景
                , page: true //开启分页
                , text: {
                    none: '暂无相关数据'
                }
                , cols: [[ //表头
                    {field: 'typeid', title: '类型ID', hide: true}
                    , {field: 'typename', title: '类型名称', align: 'center'}
                    , {
                        field: 'count', title: '存书种类', align: 'center', templet: function (d) {
                            if (d.count == null) return '<span class="layui-badge">0</span>'
                            else return '<span class="layui-badge layui-bg-green">' + d.count + '</span>'
                        }
                    }
                    , { fixed: 'right', title: '操作', align: 'center', width: 300, toolbar: '#barDemo' }
                ]]
                , limit: 10
                , limits: [5,10, 20,30, 50]
            });
        }

        /*头部工具栏*/
        table.on("toolbar(typeTable)", function (obj) {
            switch (obj.event) {
                case 'search':
                    showTable();
                    break;
                case 'addType':
                    showAddTypeDiv();
            }
        });

        /*右侧工具栏*/
        table.on('tool(typeTable)', function (obj) { //注：tool 是工具条事件名，userTable 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            if (obj.event === 'modify') {
                showModifyTypeDiv(data)
            } else if (obj.event === 'delete') {
                showDeleteTypeDiv(data);
            }
        });

        //打开添加类型弹出框
        function showAddTypeDiv() {
            $("#addTypeFrom")[0].reset();
            layer.open({
                type: 1,
                anim: 3,
                title: ['添加类型', 'font-size:20px'],
                content: $("#addTypeDiv"),
                offset: '100px',
                area: ['400px', '250px'],
            })
        }

        //打开删除类型模态框
        function showDeleteTypeDiv(data) {
            $("#deleteTypeFrom")[0].reset();
            layer.open({
                type: 1,
                anim: 3,
                title: ['删除类型', 'font-size:20px'],
                content: $("#deleteTypeDiv"),
                offset: '100px',
                area: ['300px', '150px'],
                success: function () {
                    form.val('deleteTypeFrom', data)
                }
            })
        }

        //打开修改类型弹出框
        function showModifyTypeDiv(data) {
            $("#addTypeFrom")[0].reset();
            layer.open({
                type: 1,
                anim: 5,
                title: ['修改类型', 'font-size:20px'],
                content: $("#addTypeDiv"),
                offset: '100px',
                area: ['400px', '250px'],
                success: function () {
                    form.val('addTypeFrom', data)
                }
            });
        }

        //页面加载完成后加载函数
        $(function () {
            //渲染表格
            showTable();
            //新增类型的表单验证
            addTypeCheck();
        });

        //删除类型表单提交
        $("#deleteTypeBtn").click(function () {
            let typeid = $("#deleteTypeId").val();
            let countValue = $("#deleteTypeCount").val();
            if (countValue == null || countValue === "") {
                $.ajax({
                    url: '/typeServlet/deleteType',
                    type: 'post',
                    async: false,
                    data: {typeid: typeid},
                    success: function (result) {
                        if (result != 0) {
                            showTable();
                            toastr.success('删除成功');
                            layer.closeAll('page'); //关闭所有页面层
                        } else {
                            showTable();
                            toastr.error('删除失败');
                            layer.closeAll('page'); //关闭所有页面层
                        }
                    },
                    dataType: 'json'
                })
            } else {
                toastr.warning('类型存在图书，无法删除！！！');
                layer.closeAll('page'); //关闭所有页面层
            }
        });

        //添加、修改类型的表单验证和提交
        function addTypeCheck() {
            layui.use('form', function () {
                var form = layui.form;
                form.verify({
                    addTypeName: function (value, item) { //value：表单的值、item：表单的DOM对象
                        let msg = 1;
                        let typeid = $("#typeid").val()
                        $.ajax({
                            url: '/typeServlet/checkName',
                            async: false,
                            type: 'post',
                            data: {typename: value, typeid: typeid},
                            success: function (result) {
                                let resu = parseInt(result);
                                if (resu == 0) {
                                    msg = 0
                                }
                            },
                            dataType: 'json',
                        });
                        if (msg == 0) {
                            return '该名字已经存在'
                        }
                    }
                });
                //监听提交
                form.on('submit(addType)', function (data) {
                    //console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                    $.ajax({
                        url: '/typeServlet/addType',
                        type: 'post',
                        async: false,
                        data: data.field,
                        success: function (result) {
                            let resultValue = parseInt(result);
                            if (resultValue > 0) {
                                showTable();
                                toastr.success('操作成功');
                                layer.closeAll('page'); //关闭所有页面层
                            } else {
                                showTable();
                                toastr.error('操作失败');
                                layer.closeAll('page'); //关闭所有页面层
                            }
                        },
                    })
                });
            });
        }
    })

</script>

</html>
